import { useEffect, useState } from 'react'
import styles from './index.less'
import Count from './count'
import { PageContainer } from '@ant-design/pro-layout'

export default () => {
  const [count, setCount] = useState<number>(0)

  function updateCount(val: number) {
    setCount(val)
  }

  useEffect(() => { // mount
    console.log('mount ->', count)
  }, [])

  useEffect(() => { // update
    console.log('update ->', count)
  })

  return (
    <PageContainer title="Hello">
      <button
        className={styles.title}
        style={{ fontSize: 16 }}
        onClick={() => setCount(count + 1)}
      >
        count++ {count}
      </button>
      <Count updateCount={updateCount} count={count} />
    </PageContainer>
  )
}